<template>
	<view class="content">
		<!-- 留出顶部状态栏的高度 -->
		<view class="f0" :style="{width:'100%', height: statusBarHeight + 'px',backgroundColor: '#009900'}"></view>
		<!-- 自定义导航条 -->
		<zh-nav-bar title="缴 费">
			<text class="left" slot="icon-left">
				<uni-icons size="26" color="#fff" type="back" @click="back"></uni-icons>
				返回
			</text>

			<text slot="icon-right">
				<uni-icons size="26" color="#fff" class="icon" type="list" @click="goToFeeHistory"></uni-icons>
			</text>
		</zh-nav-bar>
		<!-- 缴费金额 -->
		<uni-list class="list-header">
			<uni-list-item :title="type | feeType" :thumb="type|feeTypeIcon" thumbSize="lg">
				<!-- 插槽自定义内容 -->
				<view slot="footer" class="list-item-footer">
					<input v-model="amount" type="digit" placeholder="请输入缴费金额" />
					<text>元</text>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 缴费细则 -->
		<uni-list>
			<uni-list-item title="缴费单位" :showArrow="true">
				<view @click="openPopup" class="list-item-footer" slot="footer">
					<!-- 短路逻辑用来判断最开始的空数组 -->
					<text>{{collectors.length>0 && collectors[curCollector].cname}}</text>
				</view>
			</uni-list-item>
			<uni-list-item title="用户编号">
				<view class="list-item-footer" slot="footer">
					<input v-model="userIdInput" type="text" placeholder="请输入用户编号" @input="doUserIdChange" />
				</view>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<view class="list-item-header">
						<text>户名</text>
					</view>
				</template>
				<view class="list-item-footer" slot="footer">
					<text>{{household.householdName}}</text>
				</view>
			</uni-list-item>
			<uni-list-item title="用户住址">
				<view class="list-item-footer" slot="footer">
					<text>{{household.householdAddr}}</text>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 按钮 -->
		<button class="btn" @click="doPay">立即缴费</button>
		<!-- 缴费单位选择弹出框，初始时不可见 -->
		<uni-popup ref="collectorPopup">
			<view class="collector-popup">
				<!-- 1.弹出框的头部 -->
				<view class="header">缴费单位</view>
				<!-- 2.弹出框的主体 -->
				<view class="body">
					<!-- 临时存储的下标 -->
					<radio-group class="collector-group" @change="tmpCollector=Number($event.detail.value)">
						<label class="collector-item" v-for="(i,idx) in collectors" :key="idx">
							<text>{{i.cname}}</text>
							<!-- 解决期待是字符串的错误 -->
							<radio :value="String(idx)" :checked="curCollector==idx" />
						</label>
					</radio-group>
				</view>
				<!-- 3.弹出框的尾部 -->
				<view class="footer">
					<button class="popup-btn" @click="$refs.collectorPopup.close()">取消</button>
					<button class="popup-btn" @click="saveChosenCollector">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		feeAdd,
		feeCollector,
		householdQuery
	} from '../../service'
	export default {
		data() {
			return {
				type: 0, // 要缴费的类型
				statusBarHeight: 0,
				amount: '', // 缴费金额
				collectors: [], // 缴费单位列表
				curCollector: 0, // 当前用户选中的缴费单位，列表下标
				tmpCollector: 0, // 用户在缴费单位列表中临时选中的值，列表下标
				// 用户编号：S60011, D60011, Q60011
				userIdQueryTimer: null, // 缴费用户编号查询定时器，全局变量
				userIdInput: '', // 缴费用户编号输入框中的值
				household: {}, // 根据用户输入的缴费编号查询到的业主信息
			}
		},
		async onLoad({
			type
		}) {

			// console.log(type);
			// 在开发阶段，如果直接显示当前页面，就不会传递来type，设置跳转到‘物业缴费’页面。
			if (!type) {
				uni.navigateTo({
					url: '/pages/property-fee/property-fee',
				})
				return
			}
			this.type = Number(type) // 查询字符串转换为数字
			// 获取当前设备高度
			let info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight
			// 向服务器端异步请求当前缴费类别对应的收费单位
			let data = await feeCollector(this.type)
			// console.log(data);
			this.collectors = data
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goToFeeHistory() {
				uni.navigateTo({
					url: '/pages/fee-history/fee-history'
				})
			},
			// 打开缴费单位选择弹出框
			openPopup() {
				this.$refs.collectorPopup.open('center')
			},
			saveChosenCollector() {
				// console.log(this.tmpCollector, typeof this.tmpCollector);
				this.curCollector = this.tmpCollector
				// 关闭弹出框
				this.$refs.collectorPopup.close()
			},
			// 处理用户编号改变
			doUserIdChange() {
				if (this.userIdQueryTimer) {
					clearTimeout(this.userIdQueryTimer) // ①停止定时器倒计时
					this.userIdQueryTimer = null // ②让计时器重新变为空
				}
				this.userIdQueryTimer = setTimeout(async () => {
					if (this.userIdInput.trim().length > 3) { // 根据业务背景，去空之后的长度应不小于3位
						// console.log('发起请求');
						let data = await householdQuery(this.userIdInput)
						// console.log(data);
						if (data.code === 2000) {
							this.household = data.msg
						} else {
							// 查不到信息this.household变成空对象
							this.household = {}
							uni.showToast({
								title: '未查到相关信息',
								icon: 'none',
								position: 'top'
							})
						}
					} else {
						// 输入字符小于3，清空household信息
						this.household = {}
					}
				}, 500)
			},
			// 立即缴费业务
			async doPay() {
				// 验证缴费金额
				let amount = this.amount.trim()
				if (!amount) {
					uni.showToast({
						title: '付款金额不能为空',
						icon: 'error',
						duration: 3000
					})
					return
				}
				// 验证是否选中了某个业主账户
				if (!this.household.householdName) {
					uni.showToast({
						title: '请输入合法的业主编号',
						icon: 'error',
						duration: 3000
					})
					return
				}
				// 发送请求
				let data = await feeAdd(this.type, this.collectors[this.curCollector].cid, this.household.householdId,
					this
					.amount)
				// console.log(data);
				if (data.code == 2000) {
					// 新的缴费记录保存成功
					uni.showToast({
						title: '缴费成功',
						icon: 'success',
						duration: 3000
					})
					// 此处可以根据业务需要，清除或保存用户信息
				} else {
					uni.showToast({
						title: '缴费失败',
						content: '缴费失败！服务器返回错误' + data.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-header {
		margin-top: $uni-spacing-col-base;
		margin-bottom: $uni-spacing-col-lg;
	}

	.list-item-header {
		// background-color: #ff0;
		font-size: $uni-font-size-base;

		text {
			width: 4em;
			// 让文字在空间中两端对齐
			@include text-justify;
		}
	}

	.list-item-footer {
		align-items: center;

		input {
			text-align: right;
			font-size: $uni-font-size-base;
			margin-right: $uni-spacing-row-sm;
		}

		text {
			font-size: $uni-font-size-base;
		}
	}

	.btn {
		width: calc(100% - $uni-spacing-row-lg*2);
		color: $uni-text-color-inverse;
		background-color: $zh-theme-dark;
		font-size: $uni-font-size-lg;
		margin: $uni-spacing-col-lg*3 $uni-spacing-row-lg 0;

		&:active {
			opacity: .7;
		}
	}

	.collector-popup {
		flex-direction: column;
		min-width: 500rpx;

		.header {
			background-color: $zh-theme-dark;
			color: $uni-text-color-inverse;
			justify-content: center;
			padding: $uni-spacing-col-lg 0;
		}

		.body {
			background-color: $uni-bg-color-grey;

			.collector-group {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.collector-item {
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				display: flex;
				border-bottom: 1px solid darken($uni-border-color, 10%);

				text {
					flex: 1;
				}
			}
		}

		.footer {
			background-color: $uni-bg-color-grey;
			border-top: 1px solid lighten($zh-grey-light, 10%);
			box-shadow: 0 -5rpx 5rpx $uni-border-color;
			justify-content: space-around;
			padding: $uni-spacing-col-lg 0;

			.popup-btn {
				font-size: $uni-font-size-base;
			}
		}
	}
</style>
